<template>
  <view class="jiangjie">
    <statusBar></statusBar>
    <uni-nav-bar left-icon="back" title="我的讲解"></uni-nav-bar>
    <view style="height:10px;background-color: #f2f2f2;"></view>
    <view class="content">
		<view class="jj_list">
			<view class="jj_list_item" v-for="i in 8">
				<img src="" @click="goPlayer">
				<view class="jj_info">
					<view class="jj_title">
						<text>云龙湖旅游景区录音</text>
						<img @click="setMore" src="../../../../static/img/user/gengduo.png">
					</view>
					<view class="jj_date">
						<text>时长:3分25秒</text>
						<text>2019.9.25</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 更多弹框 -->
		<uni-popup ref="popup1" type="center" :show="ismore">
			<view class="more_div">
				<uni-nav-bar title="云龙湖旅游景区录音"></uni-nav-bar>
				<view class="more_con">
					<view class="more_list" @click="setEdit">
						<img src="../../../../static/img/user/bianji.png">
						<text>编辑</text>
					</view>
					<view class="more_list" @click="setDel">
						<img src="../../../../static/img/user/shanchu.png">
						<text>删除</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 编辑 -->
		<uni-popup ref="popup2" type="center" :show="isedit">
			<view class="edit_div">
				<view class="edit_info">
					<view class="edit_img">
						<img src="" alt="">
					</view>
					<view class="edit_title">
						<view class="edit_name">
							<text>名称 : </text><input type="text" value="云龙湖旅游景区录音">
						</view>
						<text>时长 : 3分21秒</text>
					</view>
				</view>
				<view class="edit_btn">
					<view @click="ed_cancel" class="edit_item edit_cancel">取消</view>
					<view class="line"></view>
					<view @click="ed_save" class="edit_item edit_save">保存</view>
				</view>
			</view>
		</uni-popup>
		<!-- 删除 -->
		<uni-popup ref="popup3" type="center" :show="isdel">
			<view class="delete_div">
				<view class="delete_title">确定要删除“云龙湖旅游景区录音”吗？</view>
				<view class="edit_btn">
					<view @click="dl_cancel" class="edit_item edit_cancel">取消</view>
					<view class="line"></view>
					<view @click="dl_sure" class="edit_item edit_save">删除</view>
				</view>
			</view>
		</uni-popup>
	</view>
  </view>
</template>

<script>
import statusBar from "@/components/status-bar.vue"
export default {
  components: {
    statusBar
  },
  data() {
    return {
		ismore:false,
		isedit:false,
		isdel:false
	};
  },
  created() {},
  methods: {
	  goPlayer:function(){
		  uni.navigateTo({
		  	url: 'userplayer'
		  });
	  },
	  setMore(){//更多
			this.ismore = true
	  },
	  setEdit(){
			this.ismore = false
			this.isedit = true
	  },
	  setDel(){
			this.ismore = false
			this.isdel = true
	  },
	  ed_cancel(){//编辑取消
			this.isedit = false
	  },
	  ed_save(){//编辑保存
			this.isedit = false
			uni.showToast({
				title:"保存成功",
				icon:"none"
			})
	  },
	  dl_cancel(){//删除取消
			this.isdel = false
	  },
	  dl_sure(){//删除确定
			this.isdel = false
			uni.showToast({
				title:"已删除",
				icon:"none"
			})
	  }
  }
};
</script>

<style scoped>
.content {
  background-color: #fff;
  overflow: scroll;
}
.jj_list{
	max-width: 350px;
	margin: auto;
	display: flex;
	flex-flow: wrap;
	padding: 13px 17px;
}
.jj_list_item{
	width: 48%;
	padding-bottom: 10px;
	margin-bottom: 20px;
	margin-right: 4%;
	background:rgba(255,255,255,1);
	box-shadow:1px 1px 6px 0px rgba(83,111,103,0.51);
	border-radius:5px;
}
.jj_list_item:nth-child(2n){
	margin-right: 0;
}
.jj_list_item>img{
	width: 100%;
	height: 125px;
}
.jj_list_item .jj_info{
	padding: 0px 5px;
}
.jj_list_item .jj_title{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jj_list_item .jj_title text{
	font-size:13px;
	color:rgba(51,51,51,1);
	line-height:30px;
}
.jj_list_item .jj_title img{
	width: 4px;
	height: 16px;
	padding-left: 10px;
}
.jj_list_item .jj_date{
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.jj_list_item .jj_date text{
	font-size:10px;
	color:rgba(153,153,153,1);
	line-height:20px;
}
/* 更多 */
.jiangjie >>> .uni-mask{
	z-index: 999;
	top: 0 !important;
}
.jiangjie >>> .uni-close-bottom{
	display: none;
}
.more_div{
	width:300px;
	height:160px;
	border-radius:8px;
	background: white;
	overflow: hidden;
}
.more_list{
	padding: 15px 0px;
	margin: 0px 25px;
	border-bottom: 1px solid rgba(191,191,191,1);
	display: flex;
	align-items: center;
	color:rgba(153,153,153,1);
}
.more_list:last-child{
	border: none;
}
.more_list img{
	width: 22px;
	height: 22px;
	margin-right: 13px;
}
/* 编辑 */
.edit_div{
	width:300px;
	height:200px;
	border-radius:8px;
	background: white;
}
.edit_info{
	display: flex;
	align-items: center;
	padding: 13px;
	margin-top: 25px;
}
.edit_info .edit_img{
	width:80px;
	height:80px;
	border: 1px solid red;
}
.edit_img img{
	width:80px;
	height:80px;
}
.edit_title{
	flex: 1;
	padding: 20px 10px;
	font-size: 13px;
	color:rgba(153,153,153,1);
}
.edit_name{
	display: flex;
}
.edit_name input{
	flex: 1;
	padding-left: 5px;
	color:rgba(51,51,51,1);
	border-bottom: 1px solid rgba(170,170,170,1);
	font-size: 13px;
}
.edit_btn{
	display: flex;
	justify-content: space-around;
	align-items: center;
	border-top: 1px solid rgba(210,210,210,1);
	position: absolute;
	bottom: 0;
	width: 100%;
}
.edit_btn .edit_item{
	width: 50%;
	text-align: center;
	font-size:14px;
	padding: 15px 0px;
}
.edit_btn .edit_cancel{
	color:rgba(153,153,153,1);
}
.edit_btn .edit_save{
	color:rgba(39,178,139,1);
}
.line{
	width:1px;
	height:36px;
	background:rgba(210,210,210,1);
}
/* 删除 */
.delete_div{
	width:300px;
	height:160px;
	border-radius:8px;
	background: white;
	position: relative;
}
.delete_title{
	text-align: center;
	color:rgba(51,51,51,1);
	font-size: 14px;
	margin: 40px 0px;
}
</style>
